class Register {
    constructor() {
        //绑定事件的方法
        this.bindEve()
    }
    bindEve() {
        //事件委托给ul，减少获取节点操作
        // console.log(this);
        this.$(".big").addEventListener('click', this.dispath)
        //给密码框添加输入事件
        this.$('.big #psw').addEventListener('input', this.checkCount)
        //昵称框
        this.$('.big #tel').addEventListener('input', this.checkName)
        //重复密码
        this.$('.big #repsw').addEventListener('blur', this.repsw)
        //注册事件

        this.$('.big .over').addEventListener('click', this.sign)
    }
    //区分当前点击节点
    dispath = (eve) => {
        if (eve.target.classList.contains("eye1") || eve.target.classList.contains("eye2")) {
            this.lookPwd(eve.target)
        }
    }
    //眼睛
    lookPwd = (tar) => {
        // console.log(tar.parentNode.nextElementSibling.type);
        tar.parentNode.nextElementSibling.type = "text"
        setTimeout(() => {
            tar.parentNode.nextElementSibling.type = "password"
        }, 2000)
    }
    //昵称符合判断
    checkName = () => {
        // console.log(this.value);
        //正则判断符合规则
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{2,10}$/

        if (reg.test(this.$('.big #tel').value)) {
            this.$('.big #tel').nextElementSibling.querySelector("em").className = "yes";
            this.$('.big #tel').nextElementSibling.querySelector("em").innerHTML = "恭喜，该昵称可以注册"
        } else {
            this.$('.big #tel').nextElementSibling.querySelector("em").className = "no";
            this.$('.big #tel').nextElementSibling.querySelector("em").innerHTML = "请更换个昵称"
        }

    }
    //重复密码判断
    repsw = () => {
        //第一个密码框内容
        let pwd = this.$('.big #psw').value
        //获取重复密码框内容
        let pwdS = this.$('.big #repsw').value
        if (pwd == pwdS) {
            this.$('.big #repsw').nextElementSibling.querySelector("em").className = "yes";
            this.$('.big #repsw').nextElementSibling.querySelector("em").innerHTML = "两次密码一致";
        } else {
            this.$('.big #repsw').nextElementSibling.querySelector("em").className = "no";
            this.$('.big #repsw').nextElementSibling.querySelector("em").innerHTML = "两次密码不一致";
            return
        }
    }
    //账号是否存在判断   
    //多余 原本写好的有
    times = ""
    checkCount = () => {
        //获取账号框内容
        let count = this.$('.big #code').value
        let pwd = this.$('.big #psw').value
        if (!count || !pwd) {
            this.$('.big #code').nextElementSibling.querySelector("em").className = "error";
            this.$('.big #code').nextElementSibling.querySelector("em").innerHTML = "账号不能为空"
            return
        }
        //账号的正则
        let countReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
        //密码的正则
        let reg1 = /\d/;
        let reg2 = /[a-z]/i
        let reg3 = /[$%^&*]/
        let level = 0
        if (reg1.test(pwd)) level++
        if (reg2.test(pwd)) level++
        if (reg3.test(pwd)) level++
        switch (level) {

            case 3:

                this.$('.qiang').className = "qian";
            case 2:

                this.$('.zhong').className = "zhon";
            case 1:

                this.$('.ruo').className = "ru";
        }

        //防抖
        if (this.times) clearTimeout(this.times)
        this.times = setTimeout(() => {

            axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
            let parm = `username=${count}&password=${pwd}`
            // console.log(parm);
            axios.post(`http://localhost:8888/users/login`, parm).then(res => {
                let { data } = res
                // console.log(data);
                //账号存在
                //code = 1 登录成功
                if (data.code == 1) {

                    this.$('.big #code').nextElementSibling.querySelector("em").className = "error";
                    this.$('.big #code').nextElementSibling.querySelector("em").innerHTML = "账号已经存在，请换个账号注册"
                    return

                } else {
                    this.$('.big #code').nextElementSibling.querySelector("em").className = "yes";
                    this.$('.big #code').nextElementSibling.querySelector("em").innerHTML = "恭喜，该昵称可以注册"
                }


            })
        }, 1000)


    }
    //注册
    sign = () => {
        //获取昵称 账号 密码 重复密码
        let name = this.$("#tel").value
        let count = this.$("#code").value
        let pwd = this.$("#psw").value
        let pwdS = this.$("#repsw").value
        // console.log(this.$('.agree input'));
        if (this.$('.agree input').checked) {
            axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
            let parm = `username=${count}&password=${pwd}&rpassword=${pwdS}&nickname=${name}`
            axios.post("http://localhost:8888/users/register", parm).then(res => {
                console.log(res);
                let { data } = res;
                console.log(data.code);
                if (data.code == 1) {
                    layer.msg('恭喜你注册成功,两秒后跳转登录页面');
                    setTimeout(() => {
                        location.href = './login.html'
                    }, 2000)

                } else {
                    layer.msg('注册失败，请你再仔细检查检查');
                }
            })
        } else {
            layer.msg('请勾选下面的同意按钮');
        }

    }
    //封装个获取节点对象的方法
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res
    }
}
new Register();